<template>
  <view class="sort-container">
    <view class="sort-bar-tab">
      <view class="sort-bar-item" :class="{'active': currentIndex === 0}" @click="handleShow(0, 0)"><text>综合</text></view>

      <view v-if="platform === 'VOP'" class="sort-bar-item" :class="{'active': sort.sortKey === 'discount'}" @click="handleClick('discount', 2)">
        <text>折扣</text>
        <image :src="discountImage" class="icon" />
      </view>
      <view v-else class="sort-bar-item" :class="{'active': sort.sortKey === 'sales'}" @click="handleClick('sales', 1)">
        <text>销量</text>
        <image :src="salesImage" class="icon" />
      </view>
      <view class="sort-bar-item" :class="{'active': sort.sortKey === 'price'}" @click="handleClick('price', 2)">
        <text>价格</text>
        <image :src="priceImage" class="icon" />
      </view>
      <view class="sort-bar-item" :class="{'active': sort.lowPrice!=='' || sort.highPrice!==''}" @click="handleShow(1, 3)"><text>筛选</text></view>
    </view>
    <view v-if="showFilter || showAll" class="pop-layer" @touchmove.stop.prevent="" @click="close"></view>
    <!-- 筛选 -->
    <view class="comm-pop price-range" :class="{'active': showFilter}">
      <view class="p-range-title">请输入要筛选的价格区间（元）</view>
      <view class="p-range-input">
        <input v-model="lowPrice" placeholder="最低价" class="input" type="number" />
        <text class="line">-</text>
        <input v-model="highPrice" placeholder="最高价" class="input" type="number" />
      </view>
      <view class="p-range-btn">
        <text class="b-l" @click="handleReset">重置</text>
        <text class="b-r" @click="handleSure">确认</text>
      </view>
    </view>
    <!-- 综合 -->
    <view class="comm-pop all-panel" :class="{'active': showAll}">
      <view class="all-list">
        <view class="all-item" :class="{'active': comiIndex === 0}" @click="handleCommission(0)">综合排序</view>
        <view class="all-item" :class="{'active': comiIndex === 1}" @click="handleCommission(1)">佣金从高到低</view>
        <view class="all-item" :class="{'active': comiIndex === 2}" @click="handleCommission(2)">佣金从低到高</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    sort: {
      type: Object,
      default: () => {
        return {
          sortKey: '', // 佣金：commission，销量：sales ，价格：price
          sortValue: '', // ASC 正序/ DESC 逆序
          highPrice: '',
          lowPrice: ''
        }
      }
    },
    platform: {
      type: String,
      default: 'PDD'
    }
  },
  data() {
    return {
      showFilter: false,
      showAll: false,
      currentIndex: 0,
      comiIndex: 0,
      highPrice: '',
      lowPrice: ''
    }
  },
  computed: {
    priceImage() {
      if (this.sort.sortKey === 'price') {
        if (this.sort.sortValue === 'DESC') {
          return '/static/images/common/sort_arrow_0_n.png'
        } else {
          return '/static/images/common/sort_arrow_1_n.png'
        }
      }
      return '/static/images/common/sort_arrow_null_n.png'
    },
    salesImage() {
      if (this.sort.sortKey === 'sales') {
        if (this.sort.sortValue === 'DESC') {
          return '/static/images/common/sort_arrow_0_n.png'
        } else {
          return '/static/images/common/sort_arrow_1_n.png'
        }
      }
      return '/static/images/common/sort_arrow_null_n.png'
    },
    discountImage() {
      if (this.sort.sortKey === 'discount') {
        if (this.sort.sortValue === 'DESC') {
          return '/static/images/common/sort_arrow_0_n.png'
        } else {
          return '/static/images/common/sort_arrow_1_n.png'
        }
      }
      return '/static/images/common/sort_arrow_null_n.png'
    }
  },
  methods: {
    setIndex(index) {
      this.currentIndex = index
    },
    handleShow(type, index) {
      if (type === 0) {
        this.showFilter = false
        if (this.platform !== 'VOP') {
          this.showAll = !this.showAll
        } else {
          this.handleCommission(0)
        }
      } else if (type === 1) {
        this.showAll = false
        this.showFilter = !this.showFilter
      }
      this.currentIndex = index
    },
    handleCommission(index) {
      this.comiIndex = index
      const sort = { ...this.sort }
      sort.sortKey = index === 0 ? '' : 'commission'
      sort.sortValue = index === 0 ? '' : (index === 1 ? 'DESC' : 'ASC')
      this.emitData(sort)
    },
    handleReset() {
      const sort = {
        ...this.sort,
        highPrice: '',
        lowPrice: ''
      }
      this.highPrice = ''
      this.lowPrice = ''
      this.emitData(sort)
    },
    handleSure() {
      if (Number(this.highPrice) < Number(this.lowPrice)) {
        uni.showToast({ title: '最低价不能高于最高价', icon: 'none' })
        return
      }
      const sort = {
        ...this.sort,
        highPrice: this.highPrice,
        lowPrice: this.lowPrice
      }
      this.emitData(sort)
    },
    handleClick(type, index) {
      this.currentIndex = index
      const sort = { ...this.sort }
      if (!sort.sortKey || type !== sort.sortKey) {
        if (type === 'sales' || type === 'price' || type === 'discount') {
          this.comiIndex = 0
          sort.sortKey = type
          sort.sortValue = (type === 'sales' ? 'DESC' : 'ASC')
        }
      } else if (sort.sortKey && (['sales', 'price', 'discount'].includes(type))) {
        sort.sortValue = sort.sortValue === 'DESC' ? 'ASC' : 'DESC'
      }
      this.emitData(sort)
    },
    emitData(sort) {
      this.close()
      this.$emit('change', sort)
    },
    close() {
      this.showFilter = false
      this.showAll = false
    }
  }
}
</script>

<style lang="scss" scoped>
.sort-container {
  position: relative;
}
.sort-bar-tab {
  @include flex;
  background-color: #fff;
  position: relative;
  z-index: 4;
  .sort-bar-item {
    flex: 1;
    @include flex;
    @include j-center;
    align-items: center;
    font-size:28rpx;
    color:rgba(51,51,51,1);
    line-height:88rpx;
    &.active {
      color: rgba(242,2,25,1);
    }
  }
  .icon {
    width: 16rpx;
    height: 20rpx;
    margin-left:6rpx;
  }
}
.comm-pop {
  position: absolute;
  top: 88rpx;
  background-color: #fff;
  width: 100%;
  left: -100%;
  z-index: 3;
  border-radius: 0 0 20rpx 20rpx;
  padding: 34rpx 50rpx;
  box-sizing: border-box;
  transform: translateY(-100%);
  transition: transform 0.3s;
   &.active {
     transform: translateY(0);
     left: 0;
  }
}
.price-range {

  .p-range-title {
    font-size:26rpx;
    color:rgba(51,51,51,1);
    line-height:30rpx;
  }
  .p-range-input {
    @include flex;
    padding: 30rpx 0;
    .input {
      width:200rpx;
      padding: 16rpx 20rpx;
      background:rgba(247,247,247,1);
      border-radius: 30rpx;
      font-size:24rpx;
    }
    .line {
      line-height: 60rpx;
      padding: 0 10rpx;
      color: #999;
    }

  }
  .p-range-btn {
    @include flex;
    @include j-between;
    .b-r, .b-l {
      display:block;
      width:315rpx;
      height:68rpx;
      border-radius:34rpx;
      font-size:30rpx;
      color:rgba(153,153,153,1);
      line-height:68rpx;
      text-align: center;
      box-sizing: border-box;
    }
    .b-l {
      border:1rpx solid rgba(204, 204, 204, 1);
    }
    .b-r {
      background:linear-gradient(72deg,rgba(253,28,73,1),rgba(234,4,7,1));
      color: #fff;
    }
  }
}
.all-panel {
  padding: 10rpx 30rpx;
  .all-item {
    padding: 0 20rpx;
    height: 99rpx;
    font-size:26rpx;
    color:rgba(51,51,51,1);
    border-bottom: 1rpx solid #EAEAEA;
    line-height: 99rpx;
    &:last-child {
      border-bottom: none;
    }
    &.active {
      background-image: url('~@/static/images/common/gouxuan.png');
      background-size: 30rpx 30rpx;
      background-position: right center;
      background-repeat: no-repeat;
      color: rgba(242,2,25,1);
    }
  }
}
.pop-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);

}
</style>
